<template>
	<div >
		<el-container class="container" >
			<el-container>
				<h1>物流查询系统</h1>
				<el-header class="header" >
					<div class="mes">
						<img class="nameImg" align="absmiddle" src="./assets/a2.jpg" />
						<span>王小虎</span>
					</div>
				</el-header>
				<div class="relative">
					<el-button v-popover:popover4 class="add" type="primary" size="">新增</el-button>
					
				</div>
				<el-main class="section">
					<el-table :data="computedPage" stripe >
					    <el-table-column align="center" prop="sendername" label="姓名" width="140"  type="expand"> 
							<template slot-scope="props">
										<el-form disabled label-width="100px" >
											<el-row :gutter="20">
												<el-col :span="12">
													<el-form-item label="寄件人 :" >
														<el-input v-model="props.row.sendername" ></el-input>
													</el-form-item>
													<el-form-item label="联系电话 :" >
														<el-input v-model="props.row.sendermobile"></el-input>
													</el-form-item>
													<el-form-item label="寄件地址 :" >
														<el-input v-model="props.row.sendaddr"></el-input>
													</el-form-item>
													<el-form-item label="托运日期 :" >
														<el-input v-model="props.row.consigndate"></el-input>
													</el-form-item>
													<el-form-item label="期望送达时间" >
														<el-input v-model="props.row.wanttime"></el-input>
													</el-form-item>
													<el-form-item label="件数" >
													<el-input v-model="props.row.amount"></el-input>
													</el-form-item>
													<el-form-item label="货物规格" >
														<el-input 
														:placeholder="props.row.length+' x '+props.row.width+' x '+props.row.height"></el-input>
													</el-form-item>
												</el-col>
											<el-col :span="12">
												<el-form-item label="收件人" >
													<el-input v-model="props.row.consignee"></el-input>
												</el-form-item>
												<el-form-item label="收件地址" >
													<el-input v-model="props.row.conaddr"></el-input>
												</el-form-item>
												<el-form-item label="联系电话" >
													<el-input v-model="props.row.conmobile"></el-input>
												</el-form-item>
												<el-form-item label="提货方式" >
													<el-input v-model="props.row.pickup"></el-input>
												</el-form-item>
												<el-form-item label="货物名称" >
													<el-input v-model="props.row.name"></el-input>
												</el-form-item>
												
												<el-form-item label="重量" >
													<el-input v-model="props.row.weight"></el-input>
												</el-form-item>
												<el-form-item label="货物描述" >
													<el-input v-model="props.row.description"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
									</el-form>
									</template>

						</el-table-column> 
						<el-table-column align="center" prop="sendermobile" label="联系方式" width="120">
						</el-table-column>
						<el-table-column align="center" prop="sendaddr" label="地址">
						</el-table-column>
						<el-table-column align="center" fixed="right" label="操作" width="100">
						</el-table-column>
					</el-table>
					 
					<div  class="block">
						<el-pagination 
							 @size-change="handleSizeChange"
						     @current-change="handleCurrentChange"
							:current-page="currentPageNum" 
							:page-sizes="[6, 12, 24, 48]" 
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" 
							:total="total" 
						    :background="true">
						</el-pagination>
					</div>
				</el-main>
				
			</el-container>
		</el-container>

		<el-popover ref="popover4" placement="left" width="800" trigger="click" class="alertBox" v-model="visible2">
			<el-form label-width="110px" :model="addData" :rules="rules" ref="add" >
				<h2>新增</h2>
				<el-button type="text " icon="el-icon-circle-close-outline" circle style="position:absolute;
    			left: 93%;top: 1%;" @click="closeForm"></el-button>
				<el-row >
					<el-col :span="12">
						<el-form-item label="寄件人" prop="sendername">
							<el-input v-model="addData.sendername"></el-input>
						</el-form-item>
					</el-col>	
					<el-col :span="12">
						<el-form-item label="联系电话" prop="sendermobile">
							<el-input v-model="addData.sendermobile" maxlength="11" minlength="11"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="10">
						<div>
							<el-form-item label="寄件地址" required>
								<el-cascader
								:options="allProvice"
								@change="sendCity">
								</el-cascader>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="14">
						<el-form-item label-width="0" prop="sendaddr">
							<el-input v-model="addData.sendaddr" placeholder="请输入详细地址"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="12">
						<el-form-item label="收件人" prop="consignee">
							<el-input v-model="addData.consignee"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="conmobile">
							<el-input v-model="addData.conmobile" maxlength="11" minlength="11"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="10">
						<div>
							<el-form-item label="收件地址" required>
								<el-cascader
								:options="allProvice"
								@change="conCity">
								</el-cascader>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="14">
						<el-form-item label-width="0" prop="conaddr">
							<el-input v-model="addData.conaddr" placeholder="请输入详细地址"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="12">
						<el-form-item prop="consigndate" label="托运时间" >
							<el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions1" v-model="addData.consigndate" style="width: 100%;" :editable=false ></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="wanttime" label="期望送达时间" >
							<el-date-picker type="date" placeholder="选择日期" :picker-options="pickerOptions1"v-model="addData.wanttime" style="width: 100%;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="货物名称" prop="name">
							<el-input v-model="addData.name" placeholder="请填写货物名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="件数" prop="amount" required>
							<el-input-number v-model="addData.amount"  :min="1" :max="50" label="描述文字"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="提货方式" required>
							<el-radio-group v-model="addData.formPickup">
							<el-radio label="1" >自提</el-radio>
							<el-radio label="2" >配送</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="重量" prop="weight">
							<el-input v-model="addData.weight" style="width:30%"></el-input>Kg(公斤)
						</el-form-item>
					</el-col>
				</el-row>
				<el-row >
					<el-col :span="8">
						<el-form-item label="货物规格" prop="length">
							长:<el-input v-model="addData.length"  style="width:60%;margin:0 5%"></el-input>米
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label-width="0" prop="width">
							宽:<el-input v-model="addData.width"  style="width:55%;margin:0 4%"></el-input>米
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label-width="0" prop="height">
							高:<el-input v-model="addData.height"  style="width:55%;margin:0 4%"></el-input>米
						</el-form-item>	
					</el-col>
				</el-row>
				<el-row >	
					<el-form-item label="货物描述" prop="description">
						<el-input type="textarea" v-model="addData.description"></el-input>
					</el-form-item>	
				</el-row>
				<el-form-item style="text-align:center" label-width="0">
					<el-button type="primary" @click.native="submitForm()">提交</el-button>
					<el-button @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-popover>

	</div>
</template>

<script>
	import Filter from './util/filter'
	import VDistpicker from 'v-distpicker'
	export default {
		components: {
			VDistpicker
		},
		computed: {
			computedPage() {
				var start=this.pageSize * (this.currentPageNum - 1);
				var end=this.pageSize * this.currentPageNum;
				return this.showData.slice(start,end);
			},
			total() {
				return this.showData.length;
			}
		},
		data() {
			return {
				visible2:false,
				address:'',
				num1:1,
				showData:[],
				addData:addDataObj,
				rules: rulesObj,
				allProvice:[],
				pickerOptions1: {
		          disabledDate(time) {
		            return time.getTime() < Date.now();
		          },
		          shortcuts: [{
		            text: '今天',
		            onClick(picker) {
		              picker.$emit('pick', new Date());
		            }
		          }, {
		            text: '昨天',
		            onClick(picker) {
		              const date = new Date();
		              date.setTime(date.getTime() - 3600 * 1000 * 24);
		              picker.$emit('pick', date);
		            }
		          }, {
		            text: '一周后',
		            onClick(picker) {
		              const date = new Date();
		              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', date);
		            }
		          }]
		        },
		        value1: '',
				value2: '',
				value3: '',
		        value4: '',
		        currentPageNum:1,
				pageSize:6,
				sendaddress:'',
				conaddress:'',
				sendprov:'',
				sendcity:'',
				recprov:'',
				reccity:''
		      }
    },
	created: function () {

		 this.getData();
		 this.getProvice();
	},
    methods:{
    	submitForm(formName) {
				var result=this.addData;
				var userId=localStorage.getItem("userId") || "";

				this.$refs.add.validate((valid) => {
					if(valid) {
						this.$http.post('http://172.168.1.10:8080/api/order/saveOrderinfo',{
							senderinfo:userId,
							currstatus:100,
							sendername:result.sendername,
							sendermobile:result.sendermobile,
							sendaddr:result.sendaddr,
							beginaddr:this.sendaddress,
							consigndate:result.consigndate,
							wanttime:result.wanttime,
							sendprov:this.sendprov,
							sendcity:this.sendcity,
							recprov:this.recprov,
							reccity:this.reccity,
							consignee:result.consignee,
							conaddr:result.conaddr,
							endaddr:this.conaddress,
							conmobile:result.conmobile,
							amount:result.amount,
							weight:result.weight,
							name:result.name,
							pickup:result.formPickup,
							length:result.length,
							width:result.width,
							height:result.height,
							description:result.description,
						}).then(res=>{
							this.getData()
							this.resetForm()
							this.closeForm()
						})	
					} else {
						console.log('error submit!!');

					}
				});
			},
			resetForm (formName) {
				this.$refs.add.resetFields();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPageNum = val;
				console.log(`当前页: ${val}`);
			},
			changeStyle(){
				var elIcon=document.getElementsByClassName('el-icon-circle-close-outline')[0]
				elIcon.style.fontSize='30px'
				this.$nextTick(()=>{
					var popover=document.querySelectorAll(".el-popover");
					popover.forEach((value,index)=>{
						value.className += ' scroll';
					})
				
				})
			},
			getData(){
				var userId=localStorage.getItem("userId") || "";
				this.$http.post('http://172.168.1.10:8080/api/order/orderList', {curruser: userId,
				curruserrole: 2,
				senderinfo: userId})
				.then((res) => {
				if (res.data.code == 'SUCCESS') {
						console.log(res.data.data.data)
						if(res.data.data.length!=0){
							res.data.data.data.forEach((value,index)=>{
								value.pickup=(value.pickup === 2) ? '配送' : '自提';
								var date = new Date(value.consigndate)	
								value.consigndate= Filter.fmtDate(date, 'yyyy年MM月dd日')
								var date = new Date(value.wanttime)	
								value.wanttime= Filter.fmtDate(date, 'yyyy年MM月dd日')
								
							})
						}
						res.data.data.data.forEach(value=>{
							this.$http.post('http://172.168.1.10:8080/api/order/getOrderDetail',{
								id:value.id
							}).then(result=>{
								value.sendaddr=result.data.data.sendprovname+result.data.data.sendcityname+value.sendaddr
								value.conaddr=result.data.data.recprovname+result.data.data.reccityname+value.conaddr
							})
						})
							this.showData=res.data.data.data ;
					}
				})
				.catch(function (res) {
					console.log(res)
				})
			},
			getProvice(){
				this.$http.post('http://172.168.1.10:8080/api/order/getAreaData',{
					parentid:0
				}).then(result=>{
					this.allProvice=result.data.data
					this.allProvice.forEach(val=>{
						// console.log(val.id)
						val.value=val.id;
						val.label=val.name;
						// console.log(val)
						this.$http.post('http://172.168.1.10:8080/api/order/getAreaData',{
							parentid:parseInt(val.id)
						}).then(result1=>{
							val.children=result1.data.data;
							val.children.forEach(value=>{
								value.value=value.id
								value.label=value.name
							})
						})
					})
					// console.log(this.allProvice)
				})
			},
			sendCity(value){
				this.sendprov=value[0];
				this.sendcity=value[1];
				this.allProvice.forEach(val=>{
					if(val.value==this.sendprov){
						this.value1=val.label
					}
					val.children.forEach(val1=>{
						if(val1.value==this.sendcity){
							this.value2=val1.label
						}
					})
				})
				this.sendaddress=(this.value1+this.value2)
				console.log(this.sendaddress)
			},
			conCity(value){
				this.recprov=value[0];
				this.reccity=value[1];
				console.log(this.recprov)
				console.log(this.reccity)
				this.allProvice.forEach(val=>{
					if(val.value==this.recprov){
						this.value3=val.label
					}
					val.children.forEach(val1=>{
						if(val1.value==this.reccity){
							this.value4=val1.label
						}
					})
				})
				this.conaddress=(this.value4+this.value4)
				console.log(this.conaddress)
			},
			closeForm(){
				this.visible2=false
			}
		},
		mounted(){
			this.changeStyle()
		}
	}
	const addDataObj= {
					"sendername":'',
					"sendermobile":'',
					"sendaddr":'',
					"consigndate":'',
					"wanttime":'',
					"consignee":'',
					"conaddr":'',
					"conmobile":'',
					"amount":'',
					"weight":'',
					"name":'',
					"length":'',
					"width":'',
					"height":'',
					"description":'',
					"formPickup":'1',
			};
		
	const rulesObj={
					sendername:[
						{ required: true, message: '请输入寄件人', trigger: 'blur' },
            			{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					],
					sendermobile:[
						{ required: true, message: '请输入手机号', trigger: 'blur' },
            			{ min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
					],
					sendaddr:[
						{ required: true, message: '请输入详细地址', trigger: 'blur' }
					],
					 consigndate: [
						{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
					],
					wanttime:[
						{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
					],
					consignee:[
						{ required: true, message: '请输入收件人', trigger: 'blur' },
            			{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					],
					conmobile:[
						{ required: true, message: '请输入手机号', trigger: 'blur' },
            			{ min: 11, max: 11, message: '手机号长度为11个字符', trigger: 'blur' }
					],
					conaddr:[
						{ required: true, message: '请输入详细地址', trigger: 'blur' }
					],
					weight:[
						{ required: true, message: '请输入重量', trigger: 'blur' },
            			{ min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					name:[
						{ required: true, message: '请输入货物名称', trigger: 'blur' }
					],
					length:[
						{ required: true, message: '请输入长度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					width:[
						{ required: true, message: '请输入宽度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					height:[
						{ required: true, message: '请输入高度', trigger: 'blur' },
						{min:0, max: 999, message: '请输入0-999之间的数字', trigger: 'blur' }
					],
					description:[
						{ required: true, message: '请输入货物相关描述', trigger: 'blur' }
					],
			};
</script>

<style>
	#app {
		font-family: Helvetica, sans-serif;
		text-align: center;
	}
	
	.el-header {
		background: #1c81e5;
		color: #FFF;
	
	}
	
	.container{height: 100%; border: 1px solid #eee;}
	.container h1{ margin:18px;font-size: 30px; text-shadow: 5px 5px 5px gainsboro;}
	.header {
		width: 100%;
		text-align: right;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
		position: relative;
		background: url(assets/a.jpg) no-repeat;
		/*background-size: ;*/
	}
	
	.header .mes {
		height: 100%;
		margin: 0;
		position: absolute;
		left: 50px;
		font-size: 18px;
		line-height: 55px;
	}
	
	.el-aside {
		color: #333;
	}
	
	.add {
		width: 100px;
		position: absolute;
		right:10%;
		height: 40px;
		line-height: 0;
	}
	
	.nameImg {
		border-radius: 50%;
		height: 80%;
		/*position: absolute;
		right: 60px;
		top: 50%;
		transform: translate(0,-40%);*/
	}
	.section{width: 85%; margin: 0 auto; overflow-y: hidden;}
	.alertBox{height: 800px; overflow-y: scroll;}
	.relative{position: relative;height: 40px;    padding: 8px;}
	.block{margin-top: 15px;}
	.scroll{height: 80%; overflow-y: scroll; overflow-x: hidden;}
</style>       